<template>
    <document>
        <h1>MForm / 表单组件</h1>

        <h2>Example</h2>
        <h6>效果演示</h6>

        <div class="panel">
            <m-form name="form">
                <p>What is your SEX</p>
                <m-group name="sex">
                    <m-radio value="Male" style="margin-right:16px;">Male</m-radio>
                    <m-radio value="Female">Female</m-radio>
                </m-group>
                <br>
                <br>
                <p>Which fruits do you like?</p>
                <m-group name="fruit">
                    <m-checkbox value="Peach" style="margin-right:16px;">Peach</m-checkbox>
                    <m-checkbox value="Banana">Banana</m-checkbox>
                    <m-checkbox value="Apple">Apple</m-checkbox>
                    <m-checkbox value="Watermaleon">Watermaleon</m-checkbox>
                </m-group>
            </m-form>

            <div id="response">
                <m-button @click.native="showresult">CLICK ME</m-button>
            </div>
        </div>
    </document>
</template>

<style lang="less">
    @import "~core/basic.less";

    .panel {
        padding: 3*@gird;
        box-shadow: @shadow-1;
    }

    #response {
        margin-top: 24px;
        color: @danger;
    }
    
</style>

<script>
    export default {
        methods:{
            showresult(){
                this.mirror.toast(`Your choise is '${JSON.stringify(this.mirror.get("form"))}'`,0,"sub");
            }
        }
    }
</script>